<template>
  <div id="login">
    <p>×</p>
    <h3>密码登录</h3>
    <div class="data">
      <div class="ipt">
        <input type="text" placeholder="手机/用户名" v-model="form.name" />
      </div>
      <div class="ipt">
        <input type="password" placeholder="密码" v-model="form.password" />
      </div>
      <button :class="{ active: form.name || form.password }" @click="login">
        登录
      </button>
      <div class="check">
        <p>手机号登录</p>
        <p @click="register">去注册</p>
      </div>
      <p>
        <input type="radio" /> 已阅读并同意<span
          >《用户服务协议》、《隐私政策》</span
        >
      </p>
    </div>
  </div>
</template>

<script>
import { login } from "../api/index.js";
export default {
  data() {
    return {
      form: [{ name: "", password: "" }],
    };
  },
  methods: {
    login() {
      //   console.log("账号为：" + this.form.name);
      //   console.log("密码为：" + this.form.password);
      login({ phone: this.form.name, pass: this.form.password }).then((res) => {
        console.log(res.data.userinfo);
        if (res.data.code == 200) {
          alert(res.data.msg);
          localStorage.setItem('token', res.data.token);
          localStorage.setItem('id', res.data.userinfo.id);
          window.location.href = "http://localhost:8080/home";
        } else if (res.data.code == 400) {
          alert(res.data.msg);
        }
      });
      this.form.name = "";
      this.form.password = "";
    },
    register() {
      window.location.href = "http://localhost:8080/register";
    },
  },
};
document.onkeydown = function (e) {
  // console.log(e.keyCode);
  if (e.keyCode === 13) {
    window.location.href = "http://localhost:8080/home";
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

#login {
  padding: 20px;
}

#login > p {
  font-size: 35px;
}

h3 {
  margin-top: 30px;
}

.ipt {
  margin: 30px 0;
}

.ipt input {
  width: 100%;
  height: 30px;
  outline: none;
  border: 0;
  border-bottom: 1px solid rgb(194, 194, 194);
}

button {
  width: 100%;
  height: 35px;
  margin-top: 30px;
  border: 0;
  border-radius: 35px;
  background-color: rgb(223, 220, 220);
  color: gray;
}
button.active {
  background-color: lightskyblue;
}

.data .check {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.data .check p {
  color: lightskyblue;
  font-size: 13px;
}

.data > p {
  font-size: 12px;
  margin-top: 200px;
  color: rgb(205, 202, 202);
}

.data > p span {
  color: lightskyblue;
}

.bottom input {
  vertical-align: middle;
}
</style>